<template>
  <view v-if="goods_info.productName" class="goods-detail-container">
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <swiper-item v-for="(item, i) in goods_info.productPictures.split(',')" :key="i">
        <image :src="item" @click="preview(i)"></image>
      </swiper-item>
    </swiper>

    <!-- 商品信息区域 -->
    <view class="goods-info-box">
		<view class="goods-name">
			{{goods_info.productName}}
		</view> 
		<view class="goods-mail-box">
			<view class="goods-left">
				<view class="collect-and-view">
						<view class="collect">
							{{goods_info.collectionNum}}次收藏
						</view>
						<view class="view">
							{{goods_info.viewNum}}人浏览
						</view>
						</view>
				<!-- 商品价格 -->
				<view class="price">￥{{goods_info.productPrice}}</view>
			</view>
			<view class="goods-right">
				<view  v-if="userId==goods_info.sellerId" class="goods-right-mail" style="color:red">  
				      <uni-data-select 
				        v-model="value"
				        :localdata="range"
				        @change="change"
				      ></uni-data-select>
					
				</view>
				<view  v-if="userId!=goods_info.sellerId&&goods_info.status==2"  class="goods-right-mail">
					已售出
				</view>
			</view>
		</view>
		
		
      <!-- 商品信息主体区域 -->
      <view class="goods-info-body">
        {{goods_info.productDesc}}
      </view>
      
    </view>
	<view class="fixed-button" v-if="goods_info.status==1">
		<view class="favi" v-if="goods_info.userCollectionId==null"  @click="concern(goods_info.userCollectionId)">
		  <uni-icons type="star" size="22" ></uni-icons>
		  <text>收藏</text>
		</view>
		<view class="favi" v-else  @click="concern(goods_info.userCollectionId)">
		  <uni-icons type="star" size="22" color="red" ></uni-icons>
		  <text>收藏</text>
		</view>
		<view class="contact"   @click="toContact('warn')">
			<button>联系卖方</button>
		</view>
	</view>
  </view>
  <view>
  	<!-- 提示窗示例 -->
  	<uni-popup ref="alertDialog" type="dialog">
  		<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="联系卖方" title="提示" content="目前只支持线下交易,请选择校园里人多安全的场所进行交易,最好有人陪同,请注意安全!" @confirm="dialogConfirm"
  			@close="dialogClose"></uni-popup-dialog>
  	</uni-popup>
  </view>
</template>

<script>
import { mapMutations,mapState } from 'vuex'
  export default {
    computed: {
      ...mapState('m_user', ['userinfo']),
      ...mapState('m_user', ['userId']),
      ...mapState('m_dept', ['deptId']),
      ...mapState('m_dept', ['dept'])
    },
    
    data() {
      return {
        goods_info: {},
		allImage: [],
		productId: 0,
		value: 0,
		range: [
		  { value: 0, text: "删除商品" },
		  { value: 1, text: "在售" },
		  { value: 2, text: "已售出" },
		],
		msgType: 'warn',
		messageText: '这是一条成功提示',
      };
    },
    onLoad(options) {
		this.productId=parseInt(options.id)
		this.getProductDetail(this.productId)
    },
    methods: {
		//选择商品是否售卖
		change(e) {
		  //将状态值传到后端
		  this.updateProductDetail();
		},
		//更新商品
		async updateProductDetail() {
				 await uni.request({
					 url: uni.$http.baseUrl+'/api/mobileMall/updateProduct',
					 data: {
						id:this.goods_info.id,
						 	//类目id
						 categoryId:this.goods_info.categoryId,
						 	//类目名称
						 categoryName:this.goods_info.categoryName,
						 	//卖方id
						 sellerId:this.goods_info.sellerId,
						 	//商品名称
						 productName:this.goods_info.productName,
						 	//商品价格
						 productPrice:this.goods_info.productPrice,
						 	//商品图
						 productPictures:this.goods_info.productPictures,
						 	//商品描述
						 productDesc:this.goods_info.productDesc,
						 	//浏览量
						 viewNum:this.goods_info.viewNum,
						 	//收藏量
						 collectionNum:this.goods_info.collectionNum,
						 	//联系方式
						 contact:this.goods_info.contact,
						 	//状态 0-删除  1-在售  2-已售完
						 status:this.value,
						 	//创建时间
						 createTime:this.goods_info.createTime,
						 	//第一个图片
						exp1:this.goods_info.exp1,
						 
					 },
					method: 'POST',
					 header: {
						    "Content-Type": "application/json",
						 //  "Content-Type": "application/x-www-form-urlencoded"
						 },
					 success: (res) => {
						uni.$showMsg('已修改完成！')
					 },
					fail: (res) =>{
						if (res.statusCode !== 200) return uni.$showMsg()
					}
				 });
		 
		 },
     //获取商品细节
     async getProductDetail(productId) {
		 await uni.request({
			 url: uni.$http.baseUrl+'/api/mobileMall/getProductDetail',
			 data: {
				id: productId,
			 },
			method: 'POST',
			 header: {
				  //   "Content-Type": "application/json",
				  "Content-Type": "application/x-www-form-urlencoded"
				 },
			 success: (res) => {
				this.goods_info= res.data.data
				//选择在售的值
				this.value=this.goods_info.status
			 },
			fail: (res) =>{
				if (res.statusCode !== 200) return uni.$showMsg()
			}
		 });
      
      },
      preview(i) {
		this.allImage=this.goods_info.productPictures.split(',')
        uni.previewImage({
          current: i,
          urls: this.allImage.map(x => x)
        })
      },
	  //联系对方
	  toContact(type){
		  this.msgType = type
		  this.$refs.alertDialog.open()
		 
	  },
	  dialogConfirm() {
	  	this.messageText = `点击确认了 ${this.msgType} 窗口`
	  	//this.$refs.message.open()
		uni.navigateTo({
		  url: '/subpkg/cantact/cantact?sellerId='+this.goods_info.sellerId
		})
	  },
	  dialogClose() {
	  	console.log('点击关闭')
		
	  },
	  //收藏
	  favi(){
		  this.addCollection();
	  },
	  concern(followTableId){
	  	if(followTableId==null){
	  		this.addCollection()
	  	 }else{
	  		this.cancerCollection(followTableId)
	  	 }
	  },
	  async addCollection() {
		 await uni.request({
			 url: uni.$http.baseUrl+'/api/mobileMall/addCollection',
			 data: {
				productId: this.productId,
				userId : this.userId,
			 },
			method: 'POST',
			 header: {
				    "Content-Type": "application/json",
				  // "Content-Type": "application/x-www-form-urlencoded"
				 },
			 success: (res) => {
				this.goods_info.userCollectionId=res.data.data
			 },
			fail: (res) =>{
				if (res.statusCode !== 200) return uni.$showMsg()
			}
		 });
	   
	   },
	   async cancerCollection(collectionId) {
	   		 await uni.request({
	   			 url: uni.$http.baseUrl+'/api/mobileMall/deleteCollection',
	   			 data: {
	   				id: collectionId,
	   			 },
	   			method: 'POST',
	   			 header: {
	   				  //   "Content-Type": "application/json",
	   				  "Content-Type": "application/x-www-form-urlencoded"
	   				 },
	   			 success: (res) => {
	   				 this.goods_info.userCollectionId=null
	   			 },
	   			fail: (res) =>{
	   				if (res.statusCode !== 200) return uni.$showMsg()
	   			}
	   		 });
	    
	    },
    
      
    }
  }
</script>

<style lang="scss">
page{
	background-color: #ffffff;
}
  swiper {
    height: 750rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .goods-info-box {
    padding: 10px;
    padding-right: 0;
	background-color: white;
    .goods-name {
      color: #000000;
      font-size: 18px;
      margin: 10px 0;
    }
	.goods-mail-box{
		display: flex;
		justify-content: space-between;
		.goods-right{
			width: 100px;
			margin-right: 20px;
		}
	}

    .collect-and-view {
      display: flex;
	  font-size: 13px;
	  color: #b6b6b6;
      .collect {
        font-size: 13px;
        margin-right: 10px;
      }
    }
	.price{
		padding: 10px;
		color: #015364;
		font-weight: 700;
	}
	.goods-info-body{
		margin:10px;
		line-height: 2;
	}
  }
  .fixed-button{
	  position: fixed;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  height: 60px;
	  box-sizing: border-box; /* 防止padding影响宽度 */
	  bottom:0;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  background-color: white;
	   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* 水平偏移 垂直偏移 模糊距离 阴影颜色 */
	  .favi{
		  margin-left: 10px;
		  color:#017c95;
	  }
	  .contact{
		  margin-right: 10px;
		  width: 70%;
		  button{
			  color: white;
			  background-color: #017c95;
			  margin-bottom: 5px;
			  border-radius:50px;
			  font-size: 16px;
		  }
	  }
  }

  .goods-detail-container {
    padding-bottom: 50px;
  }
</style>
